<template>
  <view class="select-city-container">
    <div class="header-container">
      <div class="search-container">
        <nut-searchbar
          v-model="searchValue"
          background="#e7e8eb"
          input-background="#fff"
        >
          <template v-slot:leftin>
            <Search2 />
          </template>
        </nut-searchbar>
        <div class="drawer" v-if="searchValue.length > 0">
          <CityColony
            :title="'当前搜索'"
            v-if="currentSearchCityList.length > 0"
            :list="currentSearchCityList"
            @clickItem="onChangeItem"
          ></CityColony>
          <nut-empty description="无数据" v-else></nut-empty>
        </div>
      </div>
    </div>
    <nut-divider :style="{ color: '#f3f3f4', margin: '0' }" />
    <CityColony
      :title="'当前定位城市'"
      v-if="currentCityinfo"
      :list="[currentCityinfo]"
      @clickItem="onChangeItem"
    ></CityColony>
    <CityColony
      v-if="hotCityData.length > 0"
      :title="'热门城市'"
      :list="hotCityData"
      @clickItem="onChangeItem"
    ></CityColony>
    <nut-divider :style="{ color: '#f3f3f4', margin: '0' }" />
    <div class="elevator-container">
      <CityElevator @clickItem="onChangeItem"></CityElevator>
    </div>
  </view>
</template>

<!-- <script lang="ts">
import { needLogin } from "../../utils/needLoginHook";
export default {
  name: "SelectCity",
  mixins: [needLogin],
};
</script> -->
<script setup lang="ts">
import Taro from "@tarojs/taro";
import { storeToRefs } from "pinia";
import { ref, onMounted, watch } from "vue";
import CityElevator from "./city-elevator.vue";
import CityColony from "./city-colony.vue";
import { Search2 } from "@nutui/icons-vue-taro";
import * as _ from "underscore";
import { useLocationStore } from "../../store";

const searchValue = ref("");
const currentSearchCityList = ref([]);
const locationStore = useLocationStore();
const { hotCityData, currentCityinfo } = storeToRefs(locationStore);
const sourceUrl = ref("");

onMounted(() => {
  const instance: any = Taro.getCurrentInstance();
  if (instance.router.params.url) {
    sourceUrl.value = decodeURIComponent(instance.router.params.url);
  }
});

watch(searchValue, (newValue) => {
  currentSearchCityList.value = locationStore.allCitydata.filter(
    (city: any) => {
      return city.cityName.includes(newValue);
    }
  );
});

const onChangeItem = (item) => {
  locationStore.setSelectCityinfo(item);
  toSourceUrl();
};
const toSourceUrl = () => {
  const url = sourceUrl.value;
  if (!url) {
    Taro.navigateBack();
    return;
  }
  const tabbarPageList = [
    "/pages/home/index",
    "/pages/cinema/index",
    "/pages/order/index",
    "/pages/my/index",
  ];
  if (tabbarPageList.includes(url)) {
    Taro.switchTab({
      url: sourceUrl.value,
    });
  } else {
    Taro.redirectTo({
      url: sourceUrl.value,
    });
  }
};
</script>

<style lang="scss">
.select-city-container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  background-color: #f3f3f4;
  .header-container {
    display: flex;
    flex-direction: column;
    z-index: 5;
    .search-container {
      display: flex;
      flex-direction: column;
      position: relative;
      .drawer {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #fff;
        box-shadow: 0 10px 10px -4px rgba(0, 0, 0, 0.1);
        border-radius: 0 0 0.5rem 0.5rem;
        padding: 0.5rem 0;
      }
    }
  }
  .elevator-container {
    flex: 1;
    background-color: #fff;
  }
}
</style>
